<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ page import="com.wavecoler.professor.dao.UserDAO"%>
<%@ page import="java.util.*"%>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<%
	UserDAO ud = new UserDAO();
	List<String> users = ud.getUsernames();
%>
<title>Prueba Groups</title>
</head>
<body>
	<form id="newgroup_form" name="newgroup_form" method="POST"
		action="../../registerGroup" onsubmit="javascript: selectAll()">

		<br /> <br />

		<table cellspacing=5 cellpadding=5 align="center">
			<tr>
				<td>GroupName:</td>
				<td><input type=text name="groupname" />
				</td>
			</tr>
			<tr>
				<td>Users:</td>
				<td></td>
			</tr>
			<tr>
				<td><select id="usernames" name="usernames">
						<%
							for (int i = 0; i < users.size(); i++) {
						%>
						<option>
							<%
								out.print(users.get(i));
							%>
						</option>
						<%
							}
						%>

				</select>
				</td>
				<td><input type="button" name="add" value="+"
					onClick="javascript:addUser()" /> <input type="button"
					name="remove" value="-" /></td>
			</tr>
			<tr>
				<td colspan="2"><select id="participants" name="participants"
					multiple="multiple" size="3" style="width: 350px;"></select> <script
						language="javascript" type="text/javascript">
						function addUser() {
							var newWord = document.createElement('option');
							var dropdown = document.newgroup_form.usernames;
							var myindex = dropdown.selectedIndex;
							var username = dropdown.options[myindex].value;
							newWord.text = username;
							newWord.value = username;
							var words = document
									.getElementById('participants');
							words.add(newWord, null);

						};

						function remWord() {
							var elSel = document.getElementById('participants');
							var i;
							for (i = elSel.length - 1; i >= 0; i--) {
								if (elSel.options[i].selected) {
									elSel.remove(i);
								}
							}
						};
						
						function selectAll() {
							var words = document
									.getElementById("participants");
							for ( var i = 0; i < words.options.length; i++) {
								words.options[i].selected = true;
							}
						};
					</script>
				</td>
			</tr>
		</table>
		<br />
		<table align="center">
			<tr>
				<td></td>
				<td><input type="Submit" value="Save"
					style="height: 35px; width: 100px" /></td>
			</tr>
		</table>
	</form>
</body>
</html>